<template>
    <div id="page">
        <div class="wrapper">
            <div class="before">
                <img class="content-image"
                    src="https://www.jsdaima.com/Uploads/js/201802/1518162334/images/26145024230_06acd55d1b_b.jpg"
                    draggable="false">
            </div>
            <div class="after" style="width: 150px;">
                <img class="content-image"
                    src="https://www.jsdaima.com/Uploads/js/201802/1518162334/images/25814974803_d4c55ff708_b.jpg"
                    draggable="false">
            </div>
            <div class="scroller" style="left: 125px;">
                <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
                    viewBox="0 0 100 100">
                    <polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"></polygon>
                    <polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"></polygon>
                </svg>
            </div>
        </div>
    </div>
  </template>
  
  <script  setup>
  import { ref } from 'vue';
  let active = false;
        document.querySelector('.scroller').addEventListener('mousedown', function () {
            active = true;
            document.querySelector('.scroller').classList.add('scrolling');
        });

        document.body.addEventListener('mouseup', function () {
            active = false;
            document.querySelector('.scroller').classList.remove('scrolling');
        });
        document.body.addEventListener('mouseleave', function () {
            active = false;
            document.querySelector('.scroller').classList.remove('scrolling');
        });

        document.body.addEventListener('mousemove', function (e) {
            if (!active) return;
            let x = e.pageX;
            x -= document.querySelector('.wrapper').getBoundingClientRect().left;
            scrollIt(x);
        });
        function scrollIt(x) {
            let transform = Math.max(0, (Math.min(x,                     document.querySelector('.wrapper').offsetWidth)));
            document.querySelector('.after').style.width = transform + "px";
            document.querySelector('.scroller').style.left = transform - 25 + "px";
        }
        scrollIt(150);
        document.querySelector('.scroller').addEventListener('touchstart', function () {
            active = true;
            document.querySelector('.scroller').classList.add('scrolling');
        });
        document.body.addEventListener('touchend', function () {
            active = false;
            document.querySelector('.scroller').classList.remove('scrolling');
        });
        document.body.addEventListener('touchcancel', function () {
            active = false;
            document.querySelector('.scroller').classList.remove('scrolling');
        });
  </script >
<style  scoped>
  #page {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        * {
            margin: 0;
            box-sizing: border-box;
        }

        .wrapper {
            width: 900px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        }
      
        .before,
        .after {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-color: white;
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .content-image {
            height: 100%;
        }

        .after {
            width: 125px;
             animation-name: move;
            animation-duration: 10s;
            animation-iteration-count: 1;
        }

        .scroller {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 100px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            background-color: transparent;
            opacity: 0.9;
            pointer-events: auto;
            cursor: pointer;
            animation-name:move1;
            animation-duration:10s;
            animation-iteration-count:1;
        }

        .scroller:hover {
            opacity: 1;
        }

        .scrolling {
            pointer-events: none;
            opacity: 1;
            z-index: 1;
        }

        .scroller__thumb {
            width: 100%;
            height: 100%;
            padding: 5px;
        }

        .scroller:before,
        .scroller:after {
            content: " ";
            display: block;
            width: 7px;
            height: 9999px;
            position: absolute;
            left: 50%;
            margin-left: -3.5px;
            z-index: 30;
            transition: 0.1s;
        }

        .scroller:before {
            top: 100%;
        }

        .scroller:after {
            bottom: 100%;
        }

        .scroller {
            border: 5px solid #fff;
        }

        .scroller:before,
        .scroller:after {
            background: #fff;
        }
       @keyframes move {
            0% {
                width:10%
            }

            25% {
                width:30%
            }

            50% {
                width:50%
            }

            75% {
                width:80%

            }

            100% {
                width:100%
            }
        }
        @keyframes move1 {
            0% {
                left:0px
            }

            25% {
                left:10%
            }

            50% {
                left:30%
            }

            75% {
                left:60%

            }

            100% {
                left:100%
            }
        }

</style>